<template>
	<view class="flex grid-gap-4">
		<image
			:src="props.item.headimg"
			mode="scaleToFill"
			class="rounded-circle"
			style="width: 44px;height: 44px;"
		/>
		<view class="flex-1 flex flex-column grid-gap-2">
			<view class="flex flex-column">
				<text class="h8 font-weight-500">{{props.item.nickname}}</text>
				<text class="h10 text-placeholder">{{props.item.create_time}}</text>
			</view>
			<view class="flex flex-y-center grid-gap-2">
				<x-rate v-model="props.item.grade" ready></x-rate>
				<text class="text-warning-light-3 h10">消费后点评</text>
			</view>
			<text class="h9 line-height-2 py-2">{{props.item.content}}</text>
			<view class="grid-columns-6 grid-gap-2" @tap.stop v-if="props.item.images&&props.item.images.length>0">
				<view class="grid-column-2" v-for="(url,index) in props.item.images" :key="index"
				@tap.stop="preview(index)">
					<image
						:src="url"
						lazy-load
						mode="scaleToFill"
						class="bg"
						style="width: 100%;height: calc(calc(100vw - 140px) / 3);"
					/>
				</view>
			</view>
			<slot name="reply">
			<view class="flex h9 bg rounded-4 p-2" v-if="props.item.reply">
				<text class="text-placeholder text-nowrap">{{WebConfigStore.replaceIndustryPersonnelName('技师回复：')}}</text>
				<text class="text-grey">{{ props.item.reply }}</text>
			</view>
			</slot>
		</view>
	</view>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import {  useWebConfigStore } from "@/stores";
const WebConfigStore = useWebConfigStore();
const props = withDefaults(defineProps<{
	item: any
}>(), {
	item: {}
});
const preview = (index: number) => {
	uni.previewImage({
		current: index,
		urls: props.item.images
	});
}
</script>

<style lang="scss" scoped>
</style>